<template>
  <div id="app">
    <p>
      班级信息:
      <input type="text" v-model="clazz" />
    </p>
    <h3>{{ studentMsg }}</h3>
    <h3>{{ classMsg }}</h3>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      clazz: "huohua222",
      stuName: "杨剑",
      studentMsg: "huohua222杨剑",
      company: "好谷",
      classMsg: "好谷huohua222",
    };
  },
  methods: {},
  // 局部过滤器
  filters: {},
  // 计算属性
  computed: {},
  // 侦听器:data/computed中的数据,已经存在的数据
  // 侦听一个值得变化,来影响多个值得变化
  watch: {
    clazz(newValue, oldValue) {
      console.log(newValue);
      console.log(oldValue);
      console.log("clazz变化了");
      this.studentMsg = newValue + this.stuName;
      this.classMsg = this.company + newValue;
    },
  },
};
</script>

<style>
</style>
